<template>
  <Popup
      :round="round"
      v-model="visible"
      @click-overlay="handleClose"
      :close-on-click-overlay="false"
      :safe-area-inset-bottom="true"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      :style="getStyle('popup')"
      :overlay-style="getStyle('overlay')"
      v-if="popupShown"
  >
    <div class="room-call-patient">
      <div class="patient-info">
        <div class="item current-patient" v-if="info['treatingAlert']">
          <div class="title" :style="getStyle('current')">
            {{ info.current.content || '就诊' }}
          </div>
          <div class="content-wrap" :class="patientClassName">
            <template v-for="item in patientListInfo">
              <div class="content" :style="getStyle('currPatient')">
                {{ item.orderNo || "" }} {{ item.patientName || "" }}
              </div>
            </template>
          </div>
        </div>
        <div
            class="item wait-patient"
            v-if="info['waitingAlert'] && info['waitPatient']?.length">
          <div class="title" :style="getStyle('waiting')">
            {{ info.waiting.content || '候诊' }}
          </div>
          <div class="content-wrap" :class="waitpatientClassName">
            <template v-for="item in info['waitPatient']">
              <div class="content" :style="getStyle('waitPatient')">
                {{ item.orderNo || '\u00a0' }} {{ item.patientName || '\u00a0' }}
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import {Popup} from "vant";
import {pxToVw} from "@/utils/common";

export default {
  name: "RoomCallPatientSmall",

  componentName: "RoomCallPatientSmall",

  props: {
    visible: {
      type: Boolean,
      required: false,
    },
    info: {
      type: Object,
      required: true,
    },
  },

  components: {
    Popup,
  },

  data() {
    return {
      round: true,
    };
  },

  computed: {
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let {current, waiting, popupBackground, overlayBackground} =
        self.info || Array();
        let Obj = Object();
        switch (val) {
          case "deptRoom":
            if (!!current && Reflect.has(current, "backgroundColor")) {
              Reflect.set(Obj, "backgroundColor", current.color);
            }
            return Obj;
          case "current":  // 正在就诊的标题
            if (!!current && Reflect.has(current, "backgroundColor")) {
              Reflect.set(Obj, "backgroundColor", current.backgroundColor);
            }
            if (!!current && Reflect.has(current, "color")) {
              Reflect.set(Obj, "color", current.color);
            }
            if (!!current && Reflect.has(current, "fontSize")) {
              Reflect.set(Obj, "fontSize", pxToVw(current.fontSize));
            }
            Reflect.set(Obj, "fontWeight", (current?.titleFontWeight || 'normal'));
            return Obj;
          case "currentOrderNo":
            if (!!current && Reflect.has(current, "patientNumberBackground")) {
              Reflect.set(Obj, "background", current.patientNumberBackground);
            }
            if (!!current && Reflect.has(current, "patientNumberColor")) {
              Reflect.set(Obj, "color", current.patientNumberColor);
            }
            return Obj;
          case "currPatient":  // 就诊的字体颜色
            Reflect.set(Obj, "color", current?.patientColor || "rgba(0, 89, 179, 1)");
            Reflect.set(Obj, "fontSize", pxToVw(current?.patientFontSize || 124));
            Reflect.set(Obj, "fontWeight", (current?.patientFontWeight || 'normal'));
            return Obj;
          case "waiting":  // 等候标题的背景色和字体
            if (!!waiting && Reflect.has(waiting, "backgroundColor")) {
              Reflect.set(Obj, "backgroundColor", waiting.backgroundColor);
            }
            if (!!waiting && Reflect.has(waiting, "color")) {
              Reflect.set(Obj, "color", waiting.color);
            }
            if (!!waiting && Reflect.has(waiting, "fontSize")) {
              Reflect.set(Obj, "fontSize", pxToVw(waiting.fontSize));
            }
            Reflect.set(Obj, "fontWeight", (waiting?.titleFontWeight || 'normal'));
            return Obj;
          case "waitingOrderNo":
            if (!!waiting && Reflect.has(waiting, "patientNumberBackground")) {
              Reflect.set(Obj, "background", waiting.patientNumberBackground);
            }
            if (!!waiting && Reflect.has(waiting, "patientNumberColor")) {
              Reflect.set(Obj, "color", waiting.patientNumberColor);
            }
            return Obj;
          case "waitPatient":// 等候内容
            Reflect.set(Obj, "color", waiting?.patientColor || "rgba(299, 133, 2, 1)");
            Reflect.set(Obj, "fontSize", pxToVw(waiting?.patientFontSize || 124));
            Reflect.set(Obj, "fontWeight", (waiting?.patientFontWeight || 'normal'));
            return Obj;
          case "popup":  // module之内的背景
            Reflect.set(
                Obj,
                "backgroundColor",
                popupBackground || `rgba(255, 255, 255, 1)`
            );
            return Obj;
          case "overlay": // module之外的背景
            Reflect.set(
                Obj,
                "backgroundColor",
                overlayBackground || `rgba(0, 0, 0, 0.6)`
            );
            return Obj;
        }
      };
    },

    // 判断弹层是否显示
    popupShown: function () {
      let {treatingAlert, currPatient, waitingAlert, waitPatient} = this.info;
      return (
          (treatingAlert && !!(currPatient?.length)) || (waitingAlert && !!(waitPatient?.length))
      );
    },

    // 获取当前患者className
    patientClassName: function () {
      let currPatient = this.info["currPatient"];
      if (currPatient.length > 4) {
        return `content-wrap-col content-wrap-${currPatient.length}`;
      } else {
        return `content-wrap-${currPatient.length}`;
      }
    },

    waitpatientClassName: function () {
      let waitPatient = this.info["waitPatient"];
      if (waitPatient.length > 4) {
        return `content-wrap-col content-wrap-${waitPatient.length}`;
      } else {
        return `content-wrap-${waitPatient.length}`;
      }
    },

    //截取当前患者
    patientListInfo: function () {
      let currPatient = this.info["currPatient"];
      if (currPatient.length >= 10) {
        return currPatient.slice(0, 10);
      } else {
        return currPatient;
      }
    },
  },

  mounted() {
    console.log("init");
  },

  methods: {
    handleClose() {
      this.$emit("handleCancel");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
